<template>
  <!-- 自定义的组件，不需要导入，直接可以使用 -->
	<view class="search-container" @click="searchHandle" :style="{ 'background-color': bgcolor }">
		<!-- 自定义的搜索组件是使用 view 模拟的，并不是真正的 input 输入框 -->
    <view class="search-box" :style="{ 'border-radius': radius + 'px' }">
      <!-- 使用 uni-ui 提供的 uni-icons 图片组件实现放大镜图标 -->
      <image src="/static/icons/home_nav_search_white@3x.png" class="searchicon" v-if="homeFlag"></image>
      <image src="/static/icons/search_nav_search_black@3x.png" class="searchicon" v-else></image>
      <text class="searct-txt">搜索</text>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
    props: {
      bgcolor: {
        type: String,
        default: 'transparent'
      },
      radius: {
        type: Number,
        default: 20
      },
			homeFlag:{
				type:Boolean,
				default:false
			}
    },
    methods: {
      searchHandle () {
        this.$emit('click')
      }
    }
	}
</script>

<style lang="scss">
.search-container {
  // background-color: #c00000;
  // padding: 10px 10px;
  box-sizing: border-box;
  
  .search-box {
		width: 702rpx;
		height: 60rpx;
		border: 1rpx solid #eaeaea;
		border-radius: 30rpx;
		// width: 702rpx;
  //   height: 60rpx;
  //   // background-color: #f0f0f0;
		// border: 1rpx solid #f0f0f0;
		margin: auto;
    // border-radius: 20px;
    display: flex;
    // justify-content: center;
    align-items: center;
		
		.searchicon{
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
    
    .searct-txt {
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;
			margin-left: 14rpx;
    }
  }
}
</style>
